<template>
  <div class="content">
    <el-row class="container-marked" style="margin-top: 20px">
      <new-loading v-if="loading"></new-loading>
      <div class="header" v-if="!loading">
        <h3 class="post-title">{{ msg.articlename }}</h3>
        <div class="post-meta">
          <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="6" style="padding-top: 10px;" class="ovo"><span class="post-meta time">#时间： {{
                msg.creatdate
              }}</span>
            </el-col>
            <el-col :span="6" style="padding-top: 10px;"><span class="post-meta time">#作者：
                菜鸡望
              </span>
            </el-col>
            <el-col :span="6" class="ovo">
              <el-avatar :src="msg.img"></el-avatar>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="post-body" style="padding: 0 40px;">
        <div v-if="rich" class="post-content" v-html="msg.article"></div>
        <div class="audo" v-if="mk"
             style="height: auto;width: 100%;z-index: 100;border-top: 1px dashed #eaeaea;margin-top: 20px">
          <mavon-editor
              v-if="mk"
              style="height: 100vh;margin-top: 40px;z-index: 10"
              :toolbarsFlag="false"
              :defaultOpen="preview"
              :editable="dddd"
              ref="md"
              :ishljs="true"
              v-model="msg.article"
          />
        </div>
      </div>
      <div class="comments" v-if="!loading">
        <div style="margin: 50px 0;"></div>
        <el-input
            type="textarea"
            placeholder="请输入评论内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
        >
        </el-input>
        <div style="margin: 20px 0;"></div>
        <el-button type="danger" @click.native.prevent="addFatherComment" icon="el-icon-position" circle>xiu~
        </el-button>
        <div style="margin: 50px 0;"></div>
        <el-divider content-position="left">评论区</el-divider>
        <div class="fathercomments" v-for="(item,i) in commentermsg" :key="i">
          <el-avatar :src="item.imgsource"></el-avatar>
          <span class="writername" style="color: #409eff;cursor: pointer;">{{ item.nickname }} :</span>
          <div class="commentofmine" style="cursor: pointer;" @click="addChild(item.commentid)">{{ item.comment }}
            <time class="time" style="font-size: 14px;margin-left: 20px;color: #dbdbcc">{{ item.creattime }}</time>
          </div>
          <div class="childpool" v-if="item.children" v-for="(itt,index) in item.children">
            <el-avatar :src="itt.imgsource"></el-avatar>
            <span class="writername" style="color: #409eff;cursor: pointer;">{{ itt.nickname }} <strong
                style="color: #444;font-weight: 100;font-size: 14px">回复了 : </strong> {{ itt.forname }}</span>
            <div class="commentofmine" style="cursor: pointer;" @click="addChild(itt.commentid)">{{ itt.comment }}
              <time class="time" style="font-size: 14px;margin-left: 20px;color: #dbdbcc">{{ itt.creattime }}</time>
            </div>
          </div>
          <el-divider content-position="right">评论分割线</el-divider>
        </div>
        <el-divider></el-divider>
        <el-dialog
            title="评论墙"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
          <el-input
              type="textarea"
              placeholder="请输入评论内容"
              v-model="textarea2"
              maxlength="30"
              show-word-limit
          >
          </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false,textarea2=''">取 消</el-button>
            <el-button type="primary" @click="addChildtoAfter">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-row>
  </div>
</template>
<script>
import NewLoading from "./../../../components/NewLoading.vue";
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  name: "BlogContent",
  data() {
    return {
      preview: "preview",
      dddd: false,
      loading: false,
      msg: {},
      mk: false,
      rich: false,
      textarea: "",
      commentermsg: [],
      textarea2: "",
      centerDialogVisible: false,
      commentid: null
    };
  },
  components: {
    NewLoading,
    mavonEditor
  },
  methods: {
    addChild(commentid) {
      this.commentid = commentid
      let token = window.localStorage.getItem('myToken');
      if (token == null) {
        this.$message.error("请登录！！")
        return
      }
      this.centerDialogVisible = true
    },
    addChildtoAfter() {
      if (this.textarea2 == "") {
        this.$message.error("请输入评论！！")
        return
      }
      let id = this.$route.params.id;
      let data = {
        comment: this.textarea2,
        articleid: id,
        parentid: this.commentid
      }
      this.$http.post('/article/addChildComment', data).then(async res => {
        console.log(res)
        if (res.code == 200) {
          this.textarea2 = ""
          await this.$message.success("评论成功！！")
          this.centerDialogVisible = false
          this.getcomments()
        }
      })
    },
    addFatherComment() {
      let token = window.localStorage.getItem('myToken');
      if (token == null) {
        this.$message.error("请登录！！")
        return
      }
      let id = this.$route.params.id;
      let data = {
        comment: this.textarea,
        articleid: id
      }
      if (this.textarea == "") {
        this.$message.error("请输入评论！！")
        return
      }
      this.$http.post('/article/addFatherComment', data).then(async res => {
        console.log(res)
        if (res.code == 200) {
          this.textarea = ""
          await this.$message.success("评论成功！！")
          this.getcomments()
        }
      })
    },
    comments(articleid) {
      return new Promise(resolve => {
        this.$http.get("/article/getCommentsByArticle/" + articleid).then(res => {
          resolve(res.data)
        })
      })
    },
    getcomments(){
      let id = this.$route.params.id;
      this.comments(id).then(async res => {
        await res.filter(async (item, i) => {
          this.getUserInfoNotImportant(item.userid).then(async data => {
            await this.getimg(data.logopath).then(data => {
              item.imgsource = data
            })
            item.nickname = data.nickname
          })
          if (item.children.length != 0) {
            item.children.filter(async (ittem, index) => {
              await this.getUserInfoNotImportant(ittem.userid).then(async data => {
                await this.getimg(data.logopath).then(data => {
                  ittem.imgsource = data
                })
                ittem.nickname = data.nickname
              })
              await this.getUserInfoByParentid(ittem.parentid).then(data => {
                ittem.forname = data.nickname
              })
            })
          }
        })
        console.log(res)
        this.commentermsg = res
      })
    },
    getArticle() {
      let id = this.$route.params.id;
      this.loading = true;
      this.$http.get("/article/getArticleById/" + id).then(async data => {
        data = data.data
        await this.getimg(data.imgpathid).then(res => {
          data.img = res
        })
        if (data.sectype == "markdown") {
          this.mk = true
          this.rich = false
        } else {
          this.mk = false
          this.rich = true
        }
        this.msg = data
        this.loading = false
      })
      this.getcomments();
    },
    getUserInfoNotImportant(userid) {
      return new Promise(resolve => {
        this.$http.get("/user/getUserInfoNotImportant/" + userid).then(res => {
          resolve(res.data)
        })
      })
    },
    getUserInfoByParentid(parentid) {
      return new Promise(resolve => {
        this.$http.get('/article/getUserInfoByParentid/' + parentid).then(data => {
          resolve(data.data)
        })
      })
    },
    getimg(id) {
      return new Promise(resolve => {
        this.$http({
          url: "/file/img/" + id,
          method: "get",
          responseType: "arraybuffer",
        }).then(res => {
          let bytes = new Uint8Array(res);
          let storeData = "";
          let len = bytes.byteLength;
          for (let i = 0; i < len; i++) {
            storeData += String.fromCharCode(bytes[i]);
          }
          let database = "data:image/png;base64," + window.btoa(storeData);
          resolve(database);
        });
      })
    },
  },
  mounted() {

  },
  destroyed() {
  },
  created() {
    this.getArticle();
  },
};
</script>


<style lang="stylus">
.fathercomments {
  /*height: 70px;*/
  margin-bottom: 20px;
  /*background-color: red;*/
}

.is-circle {
  float: right;
}

.childpool {
  margin-left: 48px;
  margin-top: 20px;
}

.commentofmine {
  padding-left: 50px;
}

.comments {
  width: 95%;
  margin: 0 auto;
}

.v-note-show {
  margin-left 50%
  transform translateX(-50%)
  z-index 1
  flex 0 0 98% !important;
}

.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper {
  display: none !important;
}

.container >>> .el-divider__text {
  background-color: #f8f8f8;
}

.fathercomments {
  /*height: 70px;*/
  margin-bottom: 20px;
  /*background-color: red;*/
}

.post-body img {
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 600px;
  height: 420px;
}

.is-circle {
  float: right;
}

.childpool {
  margin-left: 48px;
  margin-top: 20px;
}

.commentofmine {
  padding-left: 50px;
}

.post-content {
  font-size: 105%;
  line-height: 1.5rem;
  word-wrap: break-word;
  word-break: break-all;
  border-top: 1px dashed #dadada;
  border-bottom: 1px dashed #dadada;
  padding: 20px 0;
  margin-top: 25px;
}

.header {
  background-color: #fff;
}

.contain {
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
}

.post-title {
  text-align: center;
  font-size: 1.5rem;
  margin: 20px auto;
}

.post-meta {
  text-align: center;
}

.writername {
  position: relative;
  top: -11.5px;
  left: 10px;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 70px 0;
}

.content {
  padding: 60px 0 30px 0;

  .container-marked {
    border-radius: 6px;
    background-color #fff
    margin auto;
    max-width: 1320px;
    width: 95%;

    .share {
      display: flex;
      align-items: center;

      a {
        display: inline-block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: 22px;
        margin: 6px;
        border-radius: 50%;
        border: 1px solid;
      }

      .icon-qzone {
        color: #fdbe3d;
        border-color: #fdbe3d;

        &:hover {
          background-color: #fdbe3d;
          color: #fff;
        }
      }

      .icon-qq {
        color: #56b6e7;
        border-color: #56b6e7;

        &:hover {
          background-color: #56b6e7;
          color: #fff;
        }
      }

      .like {
        background-color: var(--main-5);
        color: #fff !important;
      }

      .icon-love {
        width: 50px;
        height: 50px;
        color: var(--main-5);
        border-color: var(--main-5);
        font-size: 24px;

        &:hover {
          background-color: var(--main-5);
          color: #fff;
        }

        p {
          font-size: 16px;
          line-height: 10px;
          font-family: georgia;
          font-weight: bold;
        }
      }

      .icon-weibo {
        color: #ff763b;
        border-color: #ff763b;

        &:hover {
          background-color: #ff763b;
          color: #fff;
        }
      }

      .icon-wechat {
        color: #7bc549;
        border-color: #7bc549;

        &:hover {
          background-color: #7bc549;
          color: #fff;
        }
      }
    }

    .blog-info {
      border-left: 3px solid var(--main-6);
      padding-left: 8px;
      border-radius: 4px;
      margin: 30px 0
    }

    .blog-info p {
      text-align: left;
      color: #4d4d4d;
      font-size: 14px;
      margin: 0;
    }

    .article-prev-next {
      margin: 10px 0;
      overflow hidden
    }

    .article-prev-next i {
      font-weight bold
    }

    .article-prev-next .prev {
      float left
      color #969696
    }

    .article-prev-next .next {
      float right
      color #969696
    }

    .blog-mess {
      padding-bottom: 15px;

      .next {
        text-align: center;
        color: var(--main-5);
        transition: all 0.3s;

        &:hover {
          color: var(--main-6);
        }

        span {
          cursor: pointer;

          .next-icon {
            animation: next 0.6s linear infinite alternate;
          }
        }
      }
    }
  }
}

@keyframes next {
  0% {
    transform: translateY(3px);
  }

  100% {
    transform: translateY(0px);
  }
}

@media (max-width: 992px) {
  .isimg {
    height: 240px !important;
  }

  .article-title {
    font-size: 22px !important;
  }

  .ovo {
    display none
  }

  .container-marked {
    width: 100% !important
  }

}
</style>
<style lang="stylus" scoped>
.article-header {
  border-left: 5px solid #4d4d4d;
  padding: 30px 0 15px 25px;
  position: relative;
  color: #4d4d4d;
  overflow: hidden;
  border-radius: 4px;
}

.article-title {
  margin: 10px 0;
  text-align: left;
  font-size: 30px;
  font-weight: 700;
}

.article-title:after {
  display none
}

.article-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: blur(6px);
}

.isimg {
  height: 350px;
  border: none;
  text-align: center;
  padding: 0;
}

.istitle {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #51cacc;

  span {
    color: #51cacc;
  }
}

.archive-article-date {
  color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
}

.archive-article-date .icon {
  margin: 5px 5px 5px 0;
}

[class*=' icon-'], [class^=icon-] {
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>